import React from 'react';
import { Form, Icon, Input, Button, Checkbox,Card, message } from 'antd';
import './login.css';
import {setToken}from '../utils/auth';
import {loginApi}from '../server/auth';
function Login(props) {
    const {getFieldDecorator}=props.form;
  const handleSubmit = e => {
        e.preventDefault();
        props.form.validateFields((err, values) => {
          if (!err) {
          console.log('values的值的是',values);
          loginApi({
            userName:values.username,
            password:values.password
          }).then((response)=>{
            console.log('llllllllllll',response)
            if (response.code==='success') {
              message.success('登录成功')
              setToken(response.token)
              props.history.push('/admin');
            }else{
              message.info('用户不存在')
            }
          }).catch(err=>{
            console.log('错误的返回errorkkkkkkk:',err);
          })
        
          }
        });
      };
    return (
        <div className="container">
        <Card title="登录界面" className="login-form">
        <Form onSubmit={e=>handleSubmit(e)}>
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="用户名"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码!' }],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="密码"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(<Checkbox>记住我</Checkbox>)}
          
          <Button type="primary" htmlType="submit" className="login-form-button">
            登录
          </Button>
        </Form.Item>
      </Form>
      </Card>        
        </div>
    )
}
export default Form.create({name:'loginForm'})(Login);







